<!-- 营业时间相关组件 -->
<template>
  <div>
    <a-form-item-rest>
      <a-card style="margin-bottom: 10px" :style="`width:` + width + 'px'" v-for="(item, index) in thatState" :key="index">
        <div class="my-open-time">
          <CheckboxGroup class="my-open-time-week" v-model:value="item.openWeek" :options="weekData" @change="handleChange" />

          <TimeRangePicker
            :default-value="[dayjs(item.startTime, 'HH:mm'), dayjs(item.endTime, 'HH:mm')]"
            @change="(_, date) => handleTimeChange(index, _, date)"
            format="HH:mm"
          />
          <div class="my-delete-open-time" v-if="thatState.length > 1">
            <Button danger @click="() => handleDeleteOpenTime(index)">
              <template #icon>
                <Icon icon="i-ant-design:delete-twotone" class="open-time-delete-icon" :size="16" />
              </template>
            </Button>
          </div>
        </div>
      </a-card>
      <div :style="`width:` + width + 'px'" class="my-add-time">
        <a-button type="dashed" style="width: 100%" @click="handleAddTime">添加时间</a-button>
      </div>
    </a-form-item-rest>
  </div>
</template>

<script lang="ts" setup>
  import dayjs, { Dayjs } from "dayjs"
  import { watch, ref, unref, PropType, onMounted, nextTick } from "vue"
  import { Button } from "ant-design-vue"
  import { propTypes } from "/@/utils/propTypes"
  import { Checkbox, TimePicker } from "ant-design-vue"
  import { Icon } from "/@/components/Icon"
  import { useAttrs } from "/@/hooks/core/useAttrs"
  import { isArray } from "lodash-es"

  const CheckboxGroup = Checkbox.Group
  const TimeRangePicker = TimePicker.TimeRangePicker

  interface Options {
    label: string
    value: string
    fixed?: boolean | "left" | "right"
  }

  const weekData: Options[] = [
    {
      label: "周一",
      value: "1",
    },
    {
      label: "周二",
      value: "2",
    },
    {
      label: "周三",
      value: "3",
    },
    {
      label: "周四",
      value: "4",
    },
    {
      label: "周五",
      value: "5",
    },
    {
      label: "周六",
      value: "6",
    },
    {
      label: "周日",
      value: "7",
    },
  ]

  interface State {
    startTime?: string
    endTime?: string
    openWeek?: [] | any
  }
  const defaultTime: State = {
    openWeek: weekData.map((e) => e.value),
    startTime: "06:00",
    endTime: "22:00",
  }
  const thatState = ref<State[]>([])
  const attrs = useAttrs()
  const props = defineProps({
    value: propTypes.oneOfType([propTypes.string]).def("[]"),
    width: propTypes.number.def(520),
  })
  const emit = defineEmits(["change", "update:value"])
  onMounted(() => {})
  watch(
    () => props.value,
    () => {
      if (props.value) {
        const value = JSON.parse(props.value)
        if (value.length > 0) {
          thatState.value = value
          console.log("value", unref(thatState))
        }
        value.length === 0 &&
          nextTick(() => {
            emitValue()
          })
      } else {
        nextTick(() => {
          emitValue()
        })
      }
      console.log("watch value", props.value)
    },
    { deep: true }
  )

  const handleChange = (values) => {
    emitValue()
  }
  const handleTimeChange = (index, _, dateStr) => {
    console.log("index", index)

    if (isArray(dateStr) && dateStr.length == 2) {
      thatState.value[index].startTime = dateStr[0]
      thatState.value[index].endTime = dateStr[1]
    }
    emitValue()
  }

  const handleAddTime = () => {
    thatState.value.push({ ...defaultTime })
    emitValue()
  }

  const handleDeleteOpenTime = (index) => {
    thatState.value.splice(index, 1)
    emitValue()
  }

  const emitValue = () => {
    if (thatState.value.length === 0) {
      return
    }
    const value = JSON.stringify(unref(thatState))
    console.log("emitValue: ", value)

    emit("change", value)
    emit("update:value", value)
  }
</script>

<style lang="less">
  .my-open-time {
    display: flex;
    flex-flow: column;
  }
  .my-open-time-week {
    margin-bottom: 20px;
  }

  .my-add-time {
    margin-top: 20px;
  }

  .my-delete-open-time {
    position: absolute;
    right: -40px;
    top: 0px;
    .ant-btn {
      width: 32px;
      height: 32px;
    }
  }

  .open-time-delete-icon {
    padding: 0px;
  }
</style>
